树莓派+小程序开发(一) |
您所在的位置：网站首页 › 树莓派发短信 有人 › 树莓派+小程序开发(一) |
树莓派+小程序开发(一)
|
目录
树莓派+小程序开发(一) 树莓派+小程序开发(二) 四：真机调试 五: 让小程序连接树莓派 六：小程序控制面板设计 七：树莓派如何解析小程序的信息 八：树莓派如何回信息给小程序 九：树莓派与微信小程序通过websocket通信 十：小程序实时显示树莓派温湿度 十一：python版 websocket服务器实现 十二：python版websocket 服务器如何整合led和beep 十三：Python版服务器整合dht11温湿度传感器 一:前言作者：下家山 做这个项目的初衷是因为腾讯关闭了微信的对外接口，导致我不能通过微信控制树莓派，所以我开始学习小程序，我的最终目标是通过小程序能够控制我树莓派上接的设备，比如我点一下按钮可以让我树莓派上的灯开，远程关机，还可以把树莓派上采集的数据比如温湿度上传到我手机的小程序上，我们的最终目标是手机能够实时显示温湿度信息，并且能控制树莓派上的灯和蜂鸣器，效果如图： 因为最近的疫情，我可能每天都有进展，一般会一次上传一个章节，但是后面上班了可能是一周，也许到那时这个项目已经完成了，但愿。 好了，我们开工了，let’s go… 1.1 从注册开始第一步是要注册一个小程序开发的账号，就像所有第三方开发一样，微信公众号也需要，但是我们往往不记得小程序注册的网址是多少，谁记得这个呢，没关系，我们可以通过百度帮我们找，只需要我们知道在百度里面搜微信小程序即可，所以我们从注册开始吧。 小程序注册官方地址 一个邮箱只能绑定一个小程序账号，邮箱不够用可以在注册一个腾讯qq邮箱，就是申请qq就有了qq邮箱。同样的方法，你可以到百度搜索腾讯qq，然后找到官网进入，懒的人可以从这里直接进去 腾讯qq注册官网 填写了小程序邮箱信息后，需要进去登陆激活一下
一个身份证可以注册多个，同样管理员手机号也没有限制，不用担心，一个手机号可以注册多个小程序
看到下面的感叹号，恭喜你OK 了 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 我们下载稳定版（预发布版本和开发版本是给前沿探索者用的，如果像看看微信下程序的团队又研究了什么新东西出来了，可以去下载研究。） 如果你是windows系统，红色框标注的，如果苹果系统下载macos版本 安装后在桌面上是这个图片，不熟悉前端的人觉得这个log很丑，其实它是前端开发语言html的标志行符号 第一打开需要手机扫码(注册的手机)
微信官方文档 { "pages": [ "pages/index/index", "pages/logs/logs" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }, "style": "v2", "sitemapLocation": "sitemap.json" }负责页面配置，json语法格式（都是字典形式，或者字典套字典），最外层的花括号{}表示一个无名字典，然后里面是四个键值对，分别是 Key(键)：value值) “pages”:+列表， ”window”:+字典(也就是字典里面套字典了) “style”:+字符串 “sitemapLocation”:+字符串 关键字”pages”关键字“pages”表示整个小程序的配置页面，如果去掉"pages/index/index",则看不到第一页，程序装载后直接显示的是第二页，如图
关键字”window”是对整体窗体的控制，以及外观配置 “backgroundTextStyle”:“light”,//用于控制view中的上拉下拉加载效果，只能是light/dark两种选择，一种亮色，一种暗色，如果设置其他，比如设置为black，编译出错，提示： ppJSON[“window”][“backgroundTextStyle”] 字段需为 dark 或 light “navigationBarBackgroundColor”: “#fff”, “navigationBarTitleText”: “WeChat”, “navigationBarTextStyle”: “black” 这三行，是设置导航栏的，我们可以改动一下，看看导航栏在哪个位置
“style”: “v2”,是为了说明组件库版本采用的是新版v2 在下面的连接中可以找到所有基础版本库说明 https://developers.weixin.qq.com/miniprogram/dev/framework/release/v2.html Style官方说明 基础库 2.8.0 开始支持，低版本需做兼容处理。 微信客户端 7.0 开始，UI 界面进行了大改版。小程序也进行了基础组件的样式升级。app.json 中配置 “style”: "v2"可表明启用新版的组件样式。 本次改动涉及的组件有 button icon radio checkbox switch slider。可前往小程序示例进行体验。 关键字“sitemapLocation”“sitemapLocation”: “sitemap.json” 文件sitemap.json内容 { "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", "rules": [{ "action": "allow", "page": "*" }] }关键字sitemapLocation的作用主要是设置是否允许微信能否搜索小程序内的页面 官方说明： 微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时，会携带特定的 user-agent：mpcrawler 及场景值：1129。需要注意的是，若小程序爬虫发现的页面数据和真实用户的呈现不一致，那么该页面将不会进入索引中。 sitemap 配置小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引； app.wxss全局样式app.wxss作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。 /app.wxss/ /**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; }我们改动align-items做实验，看变化结果 Align-items表示所有条目垂直对齐方式，我们这里是居中对齐，它有以下对齐方式
官方说明 https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html App()函数App(Object object) 注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。 App() 必须在 app.js中调用，必须调用且只能调用一次。不然会出现无法预期的后果 //app.js App({ onLaunch: function() { // 展示本地存储能力 var logs= wx.getStorageSync('logs') ||[] logs.unshift(Date.now()) wx.setStorageSync('logs',logs) // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId } }) // 获取用户信息 wx.getSetting({ success: res => { if(res.authSetting['scope.userInfo']) { // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 wx.getUserInfo({ success: res => { // 可以将 res 发送给后台解码出 unionId this.globalData.userInfo= res.userInfo // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 if (this.userInfoReadyCallback){ this.userInfoReadyCallback(res) } } }) } } }) }, globalData: { userInfo: null } }) onLaunch(Object object)小程序初始化完成时触发，全局只触发一次。参数也可以使用 wx.getLaunchOptionsSync 获取。 // 展示本地存储能力 Logs.push(1)则是尾部插入,每次时间会累加历使数据 logs.shift()头部删除 logs.unshift()头部插入 logs.pop()尾部删除 logs.push()尾部插入 wx对象Object wx 小程序 API 全局对象，用于承载小程序能力相关 API。具体请参考小程序 API 参考文档。 wx.env小程序环境变量对象 wx.login()
我们通过console.log打印出登陆成功的返回值得到： 登陆信息: {errMsg: “login:ok”, code: “02167XtM1w2bE9161KsM12wkuM167Xtm”} Login:ok表示成功登陆，你可以试试不用手机扫码登陆，看看返回值 wx.getSetting获取用户信息 // 获取用户信息 wx.getSetting({ success: res => { console.log("认证信息:", res) if(res.authSetting['scope.userInfo']) { // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 wx.getUserInfo({ success: res => { // 可以将 res 发送给后台解码出 unionId console.log("用户信息:", res) this.globalData.userInfo= res.userInfo // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 if (this.userInfoReadyCallback){ this.userInfoReadyCallback(res) } } }) } } }) }我添加了两条语句，为了获取认证信息和用户信息 console.log(“认证信息:”, res) console.log(“用户信息:”, res) 运行结果：
|
通过这个项目，你将会学到很酷的应用，就是通过你的手机远程控制你的树莓派。打开了这个通道，就大大扩展了你树莓派的边界。
我们可以进入开发阶段了 
使用测试号即可。
pages,index,logs,utils,app.*五者的关系 1）pages,utils,app三者是并列关系 2）pages里面包含index,logs两个页面 3) app.js, app.json， app.wxss是控制整个小程序的，页面index,logs由app.json来配置 
如果我们改为baseline，效果如下 
App.wxss会作用于局部样式文件index.wxss和logs.wxss，我们从index.wxss和logs.wxss中可以看到使用了container类。
这一段代码的理解，就如注释所说，是展示本地存储能力， var logs = wx.getStorageSync(‘logs’)|| [] 这一句是通过名字logs获取数组里面的内容，如果是第一次(首次数组为空，获取到为假)，则把空数组[]复制给logs; logs.unshift(Date.now())是获取当前时间，并且插入数组logs中，unshift是前插，也叫头部插入。 大家可以直接logs.unshift(1)，看看效果 如果是1，则插入格林威治初始时间 
Res=>是一个函数，叫箭头函数 X=>xx 相当于 Function(x) { Return xx; } 所以res=>{}相当于function(res){} 我们修改一下代码，添加一条打印语句
globalData全局变量 globalData: { userInfo: null } globalData是字典，里面的userInfo初值为Null空，等待后续赋值。
这里面的逻辑关系，在index.wxml代码第4行 获取头像昵称 Wx:if是一个判断语句，hasUserInfo第一次装载页面时时false，canIUse是一个字典中的key，它的值value是有定义的，所以这里&&后面应该时为真的，但前面hasUserInfo再非一次(!表示取反)则为真，因此，wx:if里面为真，因此会显示“获取头像昵称”字样在界面上。 
如果我们点击按钮”获取头像昵称”，则会触发绑定的函数调用getUserInfo 该函数定义在Index.js中的第46行。
其中，hasUserInfo会赋值为真true. 这样再次刷新页面时，不会再显示“获取图像昵称”，而会显示真实图像了 ，注意需要微信扫码登陆 
【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |